<template>
  <div>

    <div class="wxServer">
      <div class="wxServerTitle rowFlex columnCenter">
        <div class="ttile">客服设置</div>
        <el-tooltip
          class="item"
          effect="dark"
          placement="top"
        >
          <div
            slot="content"
            class="tooltipLine"
          >
            <p>开启后，微信小程序联系转人工时展示已配置的企微客服二维码</p>
            <p>关闭后，微信小程序联系转人工时跳转至小程序客服会话</p>
          </div>
          <i
            class="el-icon-question"
            style="margin-left:5px;color:#86909C;"
          ></i>
        </el-tooltip>
        <el-switch
          v-model="ruleForm.customer_config.status"
          active-value="1"
          style="margin-left:10px;"
          inactive-value="0"
        > </el-switch>
      </div>

      <el-form
        v-if="ruleForm.customer_config.status==1"
        ref="wxSet"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        label-position="top"
      >
        <el-form-item
          label="添加客服"
          prop="customer_config.day_fans_limit"
          class="miniapp"
        >
          <div class="bgContent">
            单个客服号/日最多添加
            <el-input
              v-model="ruleForm.customer_config.day_fans_limit"
              :maxlength="3"
              oninput="value=value.replace(/^0|[^0-9]/g,'')"
              style="width:80px;margin:0 10px;"
            ></el-input>个用户，如选中多个客服号会平均进粉
          </div>
        </el-form-item>
        <el-form-item
          label="引流方式"
          prop="customer_config.customer"
        >
          <div class="bgContent accountContent">
            <div class="title rowFlex spaceBetween">
              <div class="subtitle">客服页面-转人工</div>
              <el-button @click="showAccountLayer">添加客服号</el-button>
            </div>
            <BiTable
              :data="ruleForm.customer_config.customer"
              size="medium"
              :column="tableColums"
              fixed="sticky"
              fixed-offset="50"
              :auto-scroll="false"
            >
              <template v-slot:zip="scope">
                <el-button
                  type="text"
                  size="medium"
                  @click="sceneEdit(scope)"
                >修改</el-button>
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  style="margin-left:10px;"
                  title="确定删除吗？"
                  @confirm="sceneDel(scope)"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="medium"
                  >删除</el-button>
                </el-popconfirm>
              </template>
            </BiTable>
          </div>
        </el-form-item>
      </el-form>

      <wxSetAccount
        v-if="addAccount"
        :show.sync="addAccount"
        :row-info="rowInfo"
        :user-info="userInfo"
        :width="650"
        title="添加客服号"
        @submit="formSubmit"
      />
    </div>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="onSubmit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import wxSetAccount from './wxSetAccount.vue'
import { customerData, customerSave } from '@/api/miniApp'
export default {
  components: {
    wxSetAccount
  },
  props: {
    rowInfo: {
      typeof: Object,
      default: {}
    }
  },
  data() {
    return {
      status: 0,
      addAccount: false,
      handleType: 'add',
      editIndex: '',
      userInfo: {},
      tableColums: [
        {
          label: '企微主体',
          prop: 'corp_name'
        },
        {
          label: '客服号',
          prop: 'customer_name'
        },
        {
          label: '样式',
          prop: 'template_url',
          width: 80,
          render: (h, { row }) => {
            return <el-image src={row.template_url} style='width:50px;border-radius:5px;'></el-image>
          }
        },
        {
          label: '操作',
          prop: 'zip',
          width: 120,
          slotScope: true
        }
      ],
      loading: false,
      ruleForm: {
        customer_config: {
          status: 1, // 1 开启 0 关闭
          day_fans_limit: '', // 1 开启 0 关闭
          customer: []
        }
      },
      rules: {
        'customer_config.day_fans_limit': [{ required: true, message: '请输入用户数量', trigger: 'blur' }],
        'customer_config.customer': [{ required: true, message: '请选择客服号', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.requestData()
  },
  methods: {
    async requestData() {
      const data = {
        mini_app_id: this.rowInfo.id
      }
      const res = await customerData(data)
      if (res.status_code === 1) {
        if (res.data.id) {
          this.ruleForm = res.data
        }
      }
    },
    close() {
      this.$emit('cancel')
    },
    onSubmit() {
      if (this.ruleForm.customer_config.status == 0) {
        this.confirmData()
      } else {
        this.$refs.wxSet.validate(async (valid) => {
          if (valid) {
            this.confirmData()
          }
        })
      }
    },
    async confirmData() {
      this.loading = true
      this.ruleForm.mini_app_id = this.rowInfo.id
      try {
        const res = await customerSave(this.ruleForm)
        this.loading = false
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.close()
        }
      } catch (error) {
        this.loading = false
      }
    },
    formSubmit(value) {
      if (this.handleType === 'add') {
        this.ruleForm.customer_config.customer.push(value)
      } else {
        this.ruleForm.customer_config.customer.splice(this.editIndex, 1)
        this.ruleForm.customer_config.customer.splice(this.editIndex, 0, value)
      }
    },
    sceneEdit(scope) {
      console.log(scope)
      this.handleType = 'edit'
      this.userInfo = scope.row
      this.addAccount = true
      this.editIndex = scope.$index
    },
    sceneDel(scope) {
      this.ruleForm.customer_config.customer.splice(scope.$index, 1)
    },
    showAccountLayer(item) {
      this.handleType = 'add'
      this.addAccount = true
      this.sceneIndex = item
      this.userInfo = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.wxServer {
  padding: 20px;
  .demo-ruleForm {
    margin-top: 20px;
  }
  .wxServerTitle {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #1d2129;
    line-height: 22px;
  }
  .bgContent {
    background: #f7f8fa;
    padding: 7px 10px;
  }
  .accountContent {
    padding: 15px;
  }
  .subtitle {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #333333;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
</style>